<template>
  <div class="register-container">
    <h1 class="register-title">账户注册</h1>
    
    <div class="form-item">
      <label for="email"><span class="required">*</span>邮箱 <span class="email-tip">建议使用gmail邮箱</span></label>
      <input
        id="email"
        v-model="email"
        type="email"
        placeholder="请输入"
      />
    </div>
    
    <div class="form-item">
      <label for="password"><span class="required">*</span>密码</label>
      <div class="password-input">
        <input
          id="password"
          v-model="password"
          :type="showPassword ? 'text' : 'password'"
          placeholder="请输入"
        />
        <div class="eye-icon" @click="togglePasswordVisibility">
          <svg v-if="showPassword" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <path d="M512 128c-212.8 0-409.6 129.6-512 332.8 102.4 203.2 299.2 332.8 512 332.8s409.6-129.6 512-332.8C921.6 257.6 724.8 128 512 128zM512 691.2c-128 0-230.4-102.4-230.4-230.4s102.4-230.4 230.4-230.4 230.4 102.4 230.4 230.4S640 691.2 512 691.2zM512 307.2c-83.2 0-153.6 70.4-153.6 153.6s70.4 153.6 153.6 153.6 153.6-70.4 153.6-153.6S595.2 307.2 512 307.2z" fill="#ffffff"/>
          </svg>
          <svg v-else class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <path d="M512 128c-212.8 0-409.6 129.6-512 332.8 102.4 203.2 299.2 332.8 512 332.8s409.6-129.6 512-332.8C921.6 257.6 724.8 128 512 128zM512 691.2c-128 0-230.4-102.4-230.4-230.4s102.4-230.4 230.4-230.4 230.4 102.4 230.4 230.4S640 691.2 512 691.2zM512 307.2c-83.2 0-153.6 70.4-153.6 153.6s70.4 153.6 153.6 153.6 153.6-70.4 153.6-153.6S595.2 307.2 512 307.2z" fill="#ffffff"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="form-item">
      <label for="confirmPassword"><span class="required">*</span>确认密码</label>
      <div class="password-input">
        <input
          id="confirmPassword"
          v-model="confirmPassword"
          :type="showConfirmPassword ? 'text' : 'password'"
          placeholder="请输入"
        />
        <div class="eye-icon" @click="toggleConfirmPasswordVisibility">
          <svg v-if="showConfirmPassword" class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <path d="M512 128c-212.8 0-409.6 129.6-512 332.8 102.4 203.2 299.2 332.8 512 332.8s409.6-129.6 512-332.8C921.6 257.6 724.8 128 512 128zM512 691.2c-128 0-230.4-102.4-230.4-230.4s102.4-230.4 230.4-230.4 230.4 102.4 230.4 230.4S640 691.2 512 691.2zM512 307.2c-83.2 0-153.6 70.4-153.6 153.6s70.4 153.6 153.6 153.6 153.6-70.4 153.6-153.6S595.2 307.2 512 307.2z" fill="#ffffff"/>
          </svg>
          <svg v-else class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
            <path d="M512 128c-212.8 0-409.6 129.6-512 332.8 102.4 203.2 299.2 332.8 512 332.8s409.6-129.6 512-332.8C921.6 257.6 724.8 128 512 128zM512 691.2c-128 0-230.4-102.4-230.4-230.4s102.4-230.4 230.4-230.4 230.4 102.4 230.4 230.4S640 691.2 512 691.2zM512 307.2c-83.2 0-153.6 70.4-153.6 153.6s70.4 153.6 153.6 153.6 153.6-70.4 153.6-153.6S595.2 307.2 512 307.2z" fill="#ffffff"/>
          </svg>
        </div>
      </div>
    </div>

    <div class="form-item">
      <label for="verificationCode"><span class="required">*</span>验证码</label>
      <div class="verification-code-container">
        <input
          id="verificationCode"
          v-model="verificationCode"
          type="text"
          placeholder="请输入"
          class="verification-input"
        />
        <button class="send-code-button" @click="sendVerificationCode" :disabled="cooldown > 0">
          {{ cooldown > 0 ? `${cooldown}秒后重发` : '发送验证码' }}
        </button>
      </div>
    </div>

    <!-- 按钮组 -->
    <div class="button-group">
      <button class="back-button" @click="goToLogin">返回登录</button>
      <button class="register-button" @click="handleRegister">注册</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '../store/user'
import { post } from '../utils/request'

const router = useRouter()
const userStore = useUserStore()

const email = ref('')
const password = ref('')
const confirmPassword = ref('')
const verificationCode = ref('')
const showPassword = ref(false)
const showConfirmPassword = ref(false)
const cooldown = ref(0)

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

// 切换确认密码可见性
const toggleConfirmPasswordVisibility = () => {
  showConfirmPassword.value = !showConfirmPassword.value
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!email.value) {
    alert('请输入邮箱')
    return
  }
  
  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(email.value)) {
    alert('请输入有效的邮箱地址')
    return
  }
  
  try {
    // 实际项目中，这里应该调用真实的发送验证码API
    // await post('/api/send-verification-code', {
    //   email: email.value
    // })
    
    // 模拟发送验证码
    alert('验证码已发送到您的邮箱')
    
    // 设置冷却时间
    cooldown.value = 60
    const timer = setInterval(() => {
      cooldown.value--
      if (cooldown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
    alert('发送验证码失败，请重试')
  }
}

// 注册
const handleRegister = async () => {
  // 表单验证
  if (!email.value || !password.value || !confirmPassword.value || !verificationCode.value) {
    alert('请填写所有必填项')
    return
  }
  
  // 邮箱格式验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(email.value)) {
    alert('请输入有效的邮箱地址')
    return
  }
  
  // 密码一致性验证
  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致')
    return
  }
  
  try {
    // 实际项目中，这里应该调用真实的注册API
    // const res = await post('/api/register', {
    //   email: email.value,
    //   password: password.value,
    //   verificationCode: verificationCode.value
    // })
    
    // 模拟注册成功
    alert('注册成功，请登录')
    
    // 跳转到登录页
    router.push('/login')
  } catch (error) {
    console.error('注册失败:', error)
    alert('注册失败，请重试')
  }
}

// 跳转到登录页面
const goToLogin = () => {
  router.push('/login')
}
</script>

<style scoped>
.register-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  padding: 20px;
}

.register-title {
  font-size: 24px;
  margin-top: 40px;
  margin-bottom: 30px;
}

.form-item {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #fff;
}

.required {
  color: #ff0000;
  margin-right: 4px;
}

.email-tip {
  font-size: 14px;
  color: #ff0000;
  margin-left: 4px;
}

input {
  width: 100%;
  padding: 16px;
  background-color: #222;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  box-sizing: border-box;
}

input::placeholder {
  color: #666;
}

.password-input {
  position: relative;
}

.eye-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #fff;
}

.verification-code-container {
  display: flex;
  gap: 10px;
}

.verification-input {
  flex: 1;
}

.send-code-button {
  padding: 0 16px;
  background-color: #FFD0A9;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
}

.send-code-button:disabled {
  background-color: #666;
  cursor: not-allowed;
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  gap: 10px;
}

.back-button, .register-button {
  padding: 16px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  flex: 1;
}

.back-button {
  background-color: #A0522D;
  color: #fff;
}

.register-button {
  background-color: #FFD0A9;
  color: #000;
}
</style>